<template>
  <div class="w-full h-[64px] flex justify-between items-center pr-10">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3 top-title">查看</span>
      </div>
    </div>
    <div class="flex-1"></div>
  </div>

  <div class="w-full px-6">
    <a-form ref="refForm" :model="infoForm" label-align="left">
      <div class="title h-[56px] flex items-center bg-white">
        <span>资产包基础信息</span>
      </div>
      <div class="info">
        <a-row>
          <a-col :span="8">
            <a-form-item field="" label="资产包名称:" label-col-flex="100px">{{
              infoForm.name ? infoForm.name : '~'
            }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="" label="是否共有:" label-col-flex="100px">
              <!-- {{infoForm.shared ? infoForm.shared : '~' }} -->
              <span v-if="infoForm.shared == 1">是</span>
              <span v-if="infoForm.shared == 2">否</span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="" label="资产所属组织:" label-col-flex="100px">
              {{ zuzhi }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item field="" label="资产来源:" label-col-flex="100px">{{
              infoForm.from ? infoForm.from : '~'
            }}</a-form-item>
          </a-col>
        </a-row>
      </div>
      <div class="title h-[56px] flex items-center bg-white">
        <span>资产包详细信息</span>
      </div>
      <div class="info">
        <a-row>
          <a-col :span="8">
            <a-form-item field="" label="数据日期范围:" label-col-flex="100px"
              >{{ infoForm.data_begin_time }} ~ {{ infoForm.data_end_time }}</a-form-item
            >
          </a-col>
          <a-col :span="8">
            <a-form-item field="business" label="应用行业:" label-col-flex="100px">{{
              infoForm.business ? infoForm.business : '~'
            }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="update_frequency" label="更新频率:" label-col-flex="100px">{{
              infoForm.update_frequency ? infoForm.update_frequency : '~'
            }}</a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item field="" label="应用场景:" label-col-flex="100px">{{
              infoForm.describe ? infoForm.describe : '~'
            }}</a-form-item>
          </a-col>
        </a-row>
      </div>
      <div class="title h-[56px] flex items-center bg-white">
        <span>关系信息</span>
      </div>

      <div class="w-full border border-inherit">
        <div class="flex justify-between">
          <div class="flex-1"></div>
          <div class="flex items-center"></div>
        </div>
        <div class="echarts">
          <echarts width="100%" height="100%" :data="data"> </echarts>
        </div>
      </div>
    </a-form>
  </div>
  <div class="fotter flex items-center justify-between">
    <div class="ml-6"></div>
    <div class="mr-10">
      <a-space>
        <a-button @click="handleEdit" style="border-radius: 4px">编辑当前版本</a-button>
        <a-button type="primary" class="ml-3" style="border-radius: 4px" @click="goBack"
          >取消</a-button
        >
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Resources$1 {
  name: string;
  code: string;
  security_level: string;
  scene: Array<string>;
  update_frequency: string;
}

interface Result$0 {
  create: string;
  business: string;
  data_browsing_number: number;
  data_call_number: number;
  created_time: string;
  create_user_name: string;
  data_begin_time: string;
  data_end_time: string;
  describe: string;
  from: string;
  id: number;
  name: string;
  owner_org_code: [];
  registration_status: string;
  resources: Array<Resources$1>;
  shared: number;
  update_frequency: string;
  update_time: string;
  version: number;
}

import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import echarts from '@/components/echarts_allocation/EachartsView.vue';
const route = useRoute();
const router = useRouter();
interface Resource {
  create: string;
  created_time: string;
  data_browsing_number: number;
  data_call_number: number;
  data_download_number: number;
  data_fields_count: number;
  data_update_time: string;
  from: string;
  id: number;
  is_root: number;
  name: string;
  owner_org_code: any[];
  production_resource: string;
  scene: string[];
  security_level: string;
  sync_consanguinity: boolean;
  update_frequency: string;
  update_time: string;
  version: number;
  describe: string;
  data_begin_time: string;
  data_end_time: string;
  business: string;
  shared: number;
}
/**
 * @method 组织新增渲染
 */
const zuzhi = computed(() => {
  if (infoForm.value.owner_org_code) {
    return infoForm.value.owner_org_code.map((item) => item.name).join(', ');
  }
  return '';
});
const infoForm = ref<Resource>({
  create: '',
  created_time: '',
  data_browsing_number: 0,
  data_call_number: 0,
  data_download_number: 0,
  data_fields_count: 0,
  data_update_time: '',
  from: '',
  id: 0,
  is_root: 0,
  name: '',
  owner_org_code: [],
  production_resource: '',
  scene: [],
  security_level: '',
  sync_consanguinity: false,
  update_frequency: '',
  update_time: '',
  version: 0,
  describe: '',
  data_begin_time: '',
  data_end_time: '',
  business: '',
  shared: 0
});
/**
 * @method 返回
 */
const goBack = () => {
  window.history.go(-1);
};
/**
 * @method 编辑
 */
const handleEdit = () => {
  const id = route.query.id;
  router.push({ name: '资源编辑', query: { action: '资源编辑', id: id } });
};
import * as api from '@/api/pack/pack';
/**
 * @method 详情数据
 */
const getDatil = async () => {
  const id = route.query.id;
  let res = await api.getDetails(id as unknown as number);
  infoForm.value = res.data;
};

/**
 * @method 获取信息
 */
const data = ref([
  {
    currently: true,
    id: '资产5',
    name: '测',
    parent_id: ['资源:2'],
    type: '资产',
    version: 1
  }
]);
/**
 * @method 查看关系
 */
const getGuanxi = async (val) => {
  const res = await api.getGuanxi(val);
  data.value = res.data;
  console.log(data.value);
};

onMounted(() => {
  getDatil();
  const id = route.query.id;
  getGuanxi(id);
});
</script>

<style lang="less" scoped>
// 顶部标题
.top-title {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #394d73;
}
.title {
  opacity: 1;
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #394d73;
}
.info {
  height: 96px;
  border-radius: 8px;
  opacity: 1;
  padding: 20px;
  background: #f7f9fc;
  :deep(.arco-form-item) {
    margin-bottom: 0;
  }
}
.echarts {
  width: calc(100vw - 270px);
  height: calc(100vh - 570px);
}
.fotter {
  height: 64px;
  // border: 1px solid #000;
  position: fixed;
  left: 220px;
  bottom: 0px;
  width: calc(100vw - 220px);
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
